import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:ytbusiness/config/icon_list.dart';
import 'package:ytbusiness/config/style.dart';
import 'package:ytbusiness/state/pay_type.dart';
import 'package:ytbusiness/utils/helper.dart';
import 'package:ytbusiness/utils/screen_adaptation.dart';
import 'package:ytbusiness/widgets/input_password.dart';

///支付底部弹窗
class PayBottom extends StatefulWidget {
  @override
  _PayBottomState createState() => _PayBottomState();
}

class _PayBottomState extends State<PayBottom>
    with SingleTickerProviderStateMixin {
  TabController _tabController; //tab控制器
  List<String> name = [
    "账户余额",
    "微信支付",
    "支付宝支付",
    "中国农业银行卡储蓄卡(4747)",
    "中国农业银行卡储蓄卡(4747)",
    "中国农业银行卡储蓄卡(4747)",
    "农商银行(4545)"
  ];
  List<String> iconList = [
    IconList.balance,
    IconList.weChatPay,
    IconList.aliPay,
    IconList.agriculturalBank,
    IconList.agriculturalBank,
    IconList.agriculturalBank,
    IconList.bankOfAgricultureAndCommerce
  ];
  int checkPay; //选择支付方式
  String price = "1599222.00";
  OverlayEntry payBox;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _payBox(context);
    checkPay = 0;
  }

  @override
  Widget build(BuildContext context) {
    print(checkPay);
    return GestureDetector(
      //showModalBottomSheet 代码389行禁用向下滑动关闭
      onVerticalDragEnd: (onVerticalDragEnd) {},
      child: SizedBox(
        height: setWidth(538),
        child: TabBarView(
          controller: _tabController,
          physics: NeverScrollableScrollPhysics(),
          children: [
            //付款详情
            Stack(
              children: [
                Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: setWidth(19)),
                          child: Text(
                            "付款详情",
                            style: TextStyle(
                                color: Color(0xff333333), fontSize: setSp(18)),
                          ),
                        ),
                      ],
                    ),
                    Container(
                      margin: EdgeInsets.only(
                          top: setWidth(19), bottom: setWidth(40)),
                      height: setWidth(0.5),
                      color: Color(0xffF0F0F0),
                    ),
                    GestureDetector(
                      onTap: () {
                        //跳转到支付结果
                        urlPush(context, "yuntu://pay_result");
                      },
                      child: Container(
                        child: RichText(
                            text: TextSpan(children: [
                          TextSpan(
                              text: "￥",
                              style: TextStyle(
                                  color: Color(0xff323232),
                                  fontSize: setSp(18))),
                          TextSpan(
                              text: price,
                              style: TextStyle(
                                  color: Color(0xff323232),
                                  fontSize: setSp(36),
                                  fontWeight: FontWeight.w600)),
                        ])),
                      ),
                    ),
                    GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        setState(() {
                          _tabController.index = 1;
                        });
                      },
                      child: Container(
                        margin: EdgeInsets.only(
                            left: setWidth(16),
                            right: setWidth(16),
                            top: setWidth(43)),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              child: Text(
                                "付款方式",
                                style: TextStyle(
                                    color: Color(0xff989898),
                                    fontSize: setSp(16)),
                              ),
                            ),
                            Consumer<PayType>(
                                builder: (context, payType, child) {
                              return Row(
                                children: [
                                  Container(
                                    width: setWidth(18),
                                    height: setWidth(18),
                                    child: Image.asset(
                                      payType?.image,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  SizedBox(
                                    width: setWidth(12),
                                  ),
                                  Container(
                                    child: Text(
                                      payType?.name,
                                      style: TextStyle(
                                          color: Color(0xff323232),
                                          fontSize: setSp(16)),
                                    ),
                                  ),
                                  SizedBox(
                                    width: setWidth(8),
                                  ),
                                  Container(
                                    width: setWidth(7),
                                    height: setWidth(14),
                                    child: Image.asset(
                                      "assets/images/pay_go.png",
                                      fit: BoxFit.cover,
                                    ),
                                  )
                                ],
                              );
                            }),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(
                          top: setWidth(10),
                          left: setWidth(15),
                          right: setWidth(15)),
                      height: setWidth(0.5),
                      color: Color(0xffF0F0F0),
                    ),
                  ],
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: GestureDetector(
                    onTap: () {
                      ///在当前页插入支付界面
                      Overlay.of(context).insert(payBox);
                    },
                    child: Container(
                      margin: EdgeInsets.only(
                          bottom: setWidth(25),
                          left: setWidth(15),
                          right: setWidth(15),
                          top: setWidth(25)),
                      height: setWidth(44),
                      decoration: BoxDecoration(
                        color: YTStyle.mainColor,
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "立即付款",
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: setSp(18),
                                fontWeight: FontWeight.w600),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Positioned(
                    top: setWidth(20),
                    left: setWidth(18),
                    child: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: Container(
                        padding: EdgeInsets.all(setWidth(3)),
                        width: setWidth(21),
                        height: setWidth(21),
                        child: Image.asset("assets/images/pay_close.png",
                            fit: BoxFit.cover),
                      ),
                    )),
              ],
            ),
            //选择支付方式
            Stack(
              children: [
                Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: setWidth(19)),
                          child: Text(
                            "选择付款方式",
                            style: TextStyle(
                                color: Color(0xff333333), fontSize: setSp(18)),
                          ),
                        ),
                      ],
                    ),
                    Container(
                      margin: EdgeInsets.only(top: setWidth(19)),
                      height: setWidth(0.5),
                      color: Color(0xffF0F0F0),
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            ListView.builder(
                                physics: NeverScrollableScrollPhysics(),
                                shrinkWrap: true,
                                itemCount: name.length,
                                itemBuilder: (context, index) {
                                  return GestureDetector(
                                    behavior: HitTestBehavior.opaque,
                                    onTap: () {
                                      ///使用Provider当前支付类型
                                      Provider.of<PayType>(context,
                                              listen: false)
                                          .upPayType(
                                              name: name[index],
                                              image: iconList[index]);
                                      setState(() {
                                        _tabController.index = 0;
                                        checkPay = index;
                                      });
                                    },
                                    child: Column(
                                      children: [
                                        Container(
                                          padding: EdgeInsets.only(
                                              left: setWidth(21),
                                              right: setWidth(21),
                                              top: setWidth(17)),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Row(
                                                children: [
                                                  Container(
                                                    child: Image.asset(
                                                      iconList[index],
                                                      fit: BoxFit.cover,
                                                    ),
                                                    width: setWidth(25),
                                                    height: setWidth(25),
                                                  ),
                                                  SizedBox(
                                                    width: setWidth(18),
                                                  ),
                                                  Container(
                                                    child: Text(
                                                      name[index],
                                                      style: TextStyle(
                                                          color:
                                                              Color(0xff323232),
                                                          fontSize: setSp(16)),
                                                    ),
                                                  )
                                                ],
                                              ),
                                              checkPay != index
                                                  ? Container()
                                                  : Container(
                                                      child: Image.asset(
                                                        "assets/images/check_pay.png",
                                                        fit: BoxFit.cover,
                                                      ),
                                                      width: setWidth(17),
                                                      height: setWidth(17),
                                                    ),
                                            ],
                                          ),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(
                                              top: setWidth(17),
                                              left: setWidth(67)),
                                          height: setWidth(0.5),
                                          color: Color(0xffF0F0F0),
                                        ),
                                      ],
                                    ),
                                  );
                                }), //a

                            //添加银行卡
                            GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () {
                                Navigator.of(context)
                                    .pushNamed("add_bank_card")
                                    .then((value) {
                                  if (value != null) {
                                    Map val = value as Map;
                                    setState(() {
                                      name.add(val["name"] as String);
                                      iconList.add(val["image"] as String);
                                    });
                                  }
                                });
                              },
                              child: Container(
                                padding: EdgeInsets.only(
                                    left: setWidth(21),
                                    right: setWidth(21),
                                    top: setWidth(17)),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Row(
                                      children: [
                                        Container(
                                          child: Image.asset(
                                            "assets/images/add_bank_card.png",
                                            fit: BoxFit.cover,
                                          ),
                                          width: setWidth(25),
                                          height: setWidth(25),
                                        ),
                                        SizedBox(
                                          width: setWidth(18),
                                        ),
                                        Container(
                                          child: Text(
                                            "添加银行卡",
                                            style: TextStyle(
                                                color: Color(0xff323232),
                                                fontSize: setSp(16)),
                                          ),
                                        )
                                      ],
                                    ),
                                    Container(
                                      child: Image.asset(
                                        "assets/images/pay_go.png",
                                        fit: BoxFit.cover,
                                      ),
                                      width: setWidth(7),
                                      height: setWidth(14),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(
                                  top: setWidth(17), left: setWidth(67)),
                              height: setWidth(0.5),
                              color: Color(0xffF0F0F0),
                            ),
                            SizedBox(height: setWidth(30))
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Positioned(
                    top: setWidth(20),
                    left: setWidth(18),
                    child: GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () {
                        setState(() {
                          _tabController.index = 0;
                        });
                      },
                      child: Container(
                        padding: EdgeInsets.all(setWidth(3)),
                        width: setWidth(15),
                        height: setWidth(21),
                        child: Image.asset("assets/images/pay_return.png",
                            fit: BoxFit.cover),
                      ),
                    )),
              ],
            ),
          ],
        ),
      ),
    );
  }

  ///支付框
  _payBox(BuildContext context) {
    payBox = OverlayEntry(builder: (context) {
      return InputPassword(
        payBox: payBox,
      );
    });
  }
}
